<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div-btn></div-btn>
  </div>


  <!-- 定义一个全局父组件模板-->
  <template id="father">
    <!-- 组件只能有一个根元素 -->
    <div style="width: 400px;height: 250px;background-color: aquamarine;">
      {{msg}}
      <son-btn :title-msg="msg" ></son-btn>
    </div>
  </template>


  <!-- 定义子组件模板 -->
  <template id="son">
    <!-- 组件只能有一个根元素 -->
    <div>
      <button>我是子组件按钮</button>
      {{sonMsg}}
      {{titleMsg}}
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    //定义子组件
    const SonBtn = {
      template: "#son",
      data() {
        return {
          sonMsg: "我是子组件数据"
        }
      },
      /* 父组件向父子组件传递数据，在父组件模板中使用的子组件标签上自定义属性带上传给子组件的数据，在子组件定义中使用props（数组）属性，接受父组件的数据，数组每一项为自定义属性名，接收后直接使用
      且props里接收的数据使用驼峰命名时，在父组件中发送数据的自定义属性需要使用去驼峰命名法
      */
      props: ['titleMsg']
    }

    //定义父组件
    const DivBtn = {
      template: "#father",
      data() {
        return {
          msg: "我是父组件数据"
        }
      },
      //子组件注册
      components: {
        'SonBtn': SonBtn
      }
    }

    //全局组件注册
    Vue.component('DivBtn', DivBtn);
    const app = new Vue({
      el: '#app',
      data: {},
      //子组件注册
      /* components:{
        'SonBtn': SonBtn
      } */
    })
  </script>
</body>

</html>